<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器-rem布局</title>
    <link rel="stylesheet" href="./css.css">
    <script src="./js.js"></script>
    <style>
    </style>
</head>
<body>
    <div class="box">
        <!-- 顶部 -->
        <header>
            <!-- logo -->
            <h1 class="logo">♫ BossZhu-Player ♫</h1>
            <!-- 搜索一栏 -->
            <section class="searchDIV">
                <!-- 功能 -->
                <a href="javaScript:0" class="menu" ></a>
                <!-- 搜索框 -->
                <form class="songKey" action="#">
                    <!-- 搜索框 -->
                    <div class="searchParent">
                        <input id="textKey" type="text" placeholder="输入要查询的歌曲" value="城南花已开">
                    </div>
                    <!-- 搜索按钮 -->
                    <button id="searchBtn">搜索</button> 
                </form> 
            </section>
        </header>
    
        <div class="songDiv">
            <!-- 歌曲列表 -->
            <section class="songList">
                <table>
                    <tbody>
                        <tr class="songTableHead">
                            <th>歌曲</th><th>歌手</th><th>专辑</th>
                        </tr>
                    </tbody>
                </table><!-- 歌曲列表 --><div class="hotComment">
                    <ul>
                        <li>
                            <img src="./image/user.jpg" alt="">
                            <div class="uesr">
                                <p class="userName">你的小哥 (叫朱总啦!♪(^∇^*)😁)</p>
                                <p class="time">2021年3月1日</p>
                            </div>
                            <p class="hotContent">这是我听过最抒情最催泪的一首歌，一个人躲在被子里哭了好久好久，耳机就这么循环播放着，眼泪从眼角慢慢滑至脸颊到下巴再浸湿整块枕巾，转身拭去自己干结泪痕然后孤独睡去。~</p>
                        </li>

                    </ul>
                </div>
            </section>
            <!-- 弹出层 -->
            <section class="playLayer">
                <div class="playWindow">
                    <h6>关于</h6>
                    <p>完成日期：2021年3月2日</p>
                    <p><a href="https://secs.cc">关于源码👏</a></p>
                    <p>其他的我也不想写了，就这样吧。。。</p>
                </div>
            </section>
            
        </div>
        <!-- 播放器 -->
        <audio src="" controls autoplay style="display: none;"></audio>
    </div>
    
</body>
</html>
<script>
    // 初始化量========================
    // 获取节点
    var html_node = document.getElementsByTagName('html')[0];
    
    // 根据窗口大小设置html字体大小
    html_node.style.fontSize = window.innerWidth + 'px';

    // 事件==================
    // 窗口尺寸变化事件
    window.onresize = function(){
        console.log('当前窗口大小 = ' + window.innerWidth);
        html_node.style.fontSize = window.innerWidth + 'px';
    }
</script>